/* banner首屏样式 */
.banner{
    position: relative;
    width: 100%;
    height: 714px;
    background: url('../img/banner.jpg') no-repeat center;
    background-size: cover;
}
/* 圆点样式 */
.banner .dot{
    height: 14px;
    /*定位到水平居中竖直方向距离底部19px*/position: absolute;
    bottom: 19px;
    left: 50%;
    transform:translateX(-50%);
}
.banner .dot span{
    float: left;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: #fff;

    /* hover前做好边框 后期hover时不会抖动 */
    border:3px solid transparent;
    
    /* 去除掉边框的愿填充颜色 */
    /* 剪裁背景 只保留内容区的背景色 */
    background-clip: content-box;
}
.banner .dot span:hover{
    background-color: #668aca;
    border-color: #fff;
}

/* 使得第一个圆点高亮 */
.banner .dot .active{
    background-color: #668aca;
    border-color: #fff;
}


/* 项目样式 */
.project{
    width: 100%;
    
}
.project-c{
    width: 1200px;
    /* background-color: pink; */
    margin: 0 auto;
}
/* 项目标题样式 */
.title{
    width: 100%;
    height: 50px;
    margin-top: 120px;
}
.title .cname{
    /* width: 117px; */
    height: 28px;
    line-height: 25px;
    font-size: 30px;
    margin-bottom: 6px;
    /* background-color: red; */
}
.title .ename{
    height: 10px;
    line-height: 10px;
    font-size: 12px;
    margin-bottom: 6px;
}
/* title跟随线样式 */
.title .line::before{
    float: left;
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background-color: #767676;
}
.title .line::after{
    float: right;
    content: '';
    display: block;
    width: 300px;
    height: 1px;
    background-color: #767676;
}
/* 项目导航样式 */
.pro-nav{
    /* 清除li浮动的影响 */
    /* overflow: hidden; */
    /* 由于使用overflow:hidden的方式 清除浮动 导致父元素的高度是子元素撑起来的高度是16px 子元素pro-nav-item的高度也是16px 所以设置的伪元素::after不显示 */

    /* 设置宽度时内容的宽度 */
    width:fit-content;

    /* 设置导航整体居中 */
    margin: 58px auto;
}
.pro-nav .pro-nav-item{
    float: left;
    font-size: 14px;
    width: 97px;
    height: 16px;
    line-height: 16px;
    text-align: center;    
}
/* 导航间竖线样式 */
.pro-nav .line{
    /* 要设置跟随线float 不然li.line会换行 */
    float: left;
    width: 1px;
    height: 8px;
    background-color: #767676;
    margin-top: 5px;
}
/* 项目导航跟随线样式 */
.pro-nav .pro-nav-item::after{
    display: block;
    content: '';
    width: 12px;
    height: 1px;
    margin: 0 auto;
    margin-top: 3px;
    background-color: #668aca;
    opacity: 0;
}

/* hover状态 */
.pro-nav .pro-nav-item:hover a{
    font-size: 16px;
    color: #668aca;
}
.pro-nav .pro-nav-item:hover::after{
    opacity: 1;
}

/* active部分高亮 */
.pro-nav .pro-nav-item.active a{
    font-size: 16px;
    color: #668aca;
}
.pro-nav .pro-nav-item.active::after{
    opacity: 1;
}

/* 项目卡片样式 */
.pro-card{
    overflow: hidden;
    width: 100%;
}
.pro-card .card-item{
    position: relative;
    float: left;
    width: 360px;
    /* height: 270px; */
    margin-right: 60px;
    /* background-color: pink; */
}
.card-item .bg{
    width: 100%;
    height: 180px;
}
/* 卡片背景 */
/* 设置宽高时要设置到img 仅仅设置到.bg的话 对图片大小起不到约束作用 */
.card-item .bg .initial{
    width: 100%;
    height: 180px;
    border-radius: 8px;
    display: block;
}
.card-item .bg .active{
    width: 100%;
    height: 270px;
    border-radius: 8px;
    display: none;
}
.card-item .card-info{
    position: relative;
    display: block;
    width: 260px;
    height: 34px;
    margin: 28px auto;
}
.card-item .card-info .card-title{
    font-size: 14px;
    height: 14px;
    line-height: 14px;
    margin-bottom: 7px;
}
.card-item .card-info .card-desc{
    font-size: 12px;
    height: 13px;
    line-height: 13px;
}
.card-item .card-info .arr{
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 30px;
    height: 30px;
    background: url('../img/arr.png');
}
/* 项目遮罩层样式 */
.card-item .mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 270px;
    border-radius: 8px;
    background-color:rgba(0,0,0,.5);
    color: #ffffff;
    opacity: 0;
    transform: translateY(-100%);
    transition: .4s;
}
.card-item .mask-arr{
    position: absolute;
    right: 50px;
    bottom: 60px;
    width: 30px;
    height: 30px;
    background: url('../img/mask-arr.png') no-repeat center;
    background-size: contain;
}
.card-item .mask-c{
    margin-left: 50px;
}
.card-item .mask .mask-title{
    font-size: 14px;
    height: 15px;
    line-height: 15px;
    margin-top: 58px;
}
.card-item .mask .mask-desc{
    font-size: 12px;
    height: 12px;
    line-height: 12px;
    margin-top: 4px;
}
.card-item .mask .mask-info{
    font-size: 12px;
    height: 12px;
    line-height: 22px;
    margin-top: 14px;

}
/* hover状态 */
.card-item:hover .bg{
    width: 100%;
    height: 100%;
}
.card-item:hover .initial{
    display: none;
}
.card-item:hover .card-info{
    display: none;
}
.card-item:hover .active{
    display: block;
}
.card-item:hover .mask{
    opacity: 1;
    transform: translateY(0);
}


/* 产品样式 */
.product{
    width: 100%;
    /* 高度由内容撑起 */
}
.product .product-c{
    width: 1200px;
    /* 版心居中 */
    margin: 0 auto;
}
/* 产品种类样式 */
.product-c .type{
    /* overflow: hidden; */
    width: 1046px;
    height: 114px;
    margin: 0 auto;
    margin-top: 54px;
    margin-bottom: 110px;
}
.product-c .type .type-item{
    float: left;
    width: 164px;
    height: 100%;
    margin-right: 56.5px;
    /* background-color: pink;     */
}
.type-item .type-bg{
    position: relative;
    width: 100%;
    height: 86px;
    border-radius: 5px;
}
.type-item .type-bg img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /* background-color: red; */
}
.type-item .type-info{
    font-size: 12px;
    /* 使得info居中 */
    width: fit-content;
    height: 16px;
    line-height: 16px;
    margin: 0 auto;
    margin-top: 7px;
    /* background-color: red; */
}
.type-item .type-info span{
    margin-right: 10px;
}
/* 跟随线不显示??? */
.type-item .type-info::after{
    content: ' ';
    display: block;
    width: 16px;
    height: 1px;
    margin: 0 auto;
    margin-top: 5px;
    background-color: #668aca;
    opacity: 0;
}
/* hover状态 */
.type-item:hover .type-bg{
    background-color: #668aca;
}
.type-item:hover .type-info{
    font-size: 14px;
    color: #668aca;
}
.type-item:hover .type-info::after{
    opacity: 1;
}
/* 产品种类部分高亮 */
.type-item.active .type-bg{
    background-color: #668aca;
}
.type-item.active .type-info{
    font-size: 14px;
    color: #668aca;
}
.type-item.active .type-info::after{
    opacity: 1;
}
/* 产品实物展示样式 */
.product-c .goods{
    overflow: hidden;
    width: 100%;
    /* background-color: #668aca; */
}
.product-c .goods .goods-item{
    /* 设置超出部分隐藏 否则遮罩层会在item没有被点击到时出现 */
    overflow: hidden;
    position: relative;
    float: left;
    width: 360px;
    /* 将height设置为图片+文字信息的总长度  */
    height: 360px;
    margin: 0 auto;
    margin-right: 60px;
    /* 不要使用height+margin的形式 否则overflow:hidden之后 在margin区域的内容不会显示 即info信息在遮罩层没有出现时也不会出现 */
    /* margin-bottom: 40px; */

    /* text-align: center; */

}
.product-c .goods .goods-item .goods-info{
    font-size: 16px;
    line-height: 18px;  
    width: 260px;   
    height: 40px;
    margin: 0 auto;
}
/* 产品实物遮罩层样式 */
.product-c .goods .goods-item .goods-mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 320px;
    color: #f8f8f8;
    background-color: rgba(0,0,0,.5);
    opacity: 0;
    transform: translateY(-100%);
    transition: 1s;
}
.goods .goods-mask .num{
    position: absolute;
    left: 84px;
    top: 131px;
    font-size: 30px;
    width: 25px;
    height: 25px;
    line-height: 25px;
}
.goods .goods-mask .goods-mask-line{
    position: absolute;
    left: 0;
    top: 154px;
    width: 80px;
    height: 1px;
    background-color: #f8f8f8;
}
.goods .goods-mask .goods-mask-info{
    position: absolute;
    left: 69px;
    top: 171px;
    font-size: 16px;    
    /* width: 221px; */
    height: 40px;
    line-height: 24px;
}
/* hover状态 */
.product-c .goods .goods-item:hover .goods-mask{
    opacity: 1;
    transform: translateY(0);
}
.product-c .goods .goods-item:hover .goods-info{
    display: none;
}


/* 服务部分样式 */
.service{
    width: 100%;
    /* h由内容撑起 */
}
/* 服务标题版心 */
.service .service-title-c{
    width: 1200px;
    margin: 0 auto;
}
/* 服务背景图 */
.service .service-bg{
    width: 100%;
    height: 700px;
    background:url('../img/service-bg.jpg') no-repeat center;
    background-size: cover;
    margin-top: 60px;
}
/* 服务背景版心样式 */
.service .service-bg .service-bg-c{
    position: relative;
    width: 1200px;
    height: 700px;
    /* 居中 */
    margin: 0 auto;
    color: #ffffff;
    /* background-color: red; */
}
/* 服务背景标题 */
.service-bg-c .service-bg-title{
    position: absolute;
    left: 0;
    top: 150px;
    font-size: 30px;
    height: 23px;
    line-height: 21px;
}
/* 服务背景详细信息 */
.service-bg-c .service-bg-desc{
    position: absolute;
    left: 0;
    top: 215px;
    height: 36px;
    line-height: 22px;
}
/* 服务背景轮播图 */
.service-bg-c .service-bg-content{
    position: absolute;
    right: 3px;
    top: 400px;
    width: 997px;
    height: 150px;
    /* background-color:red; */
}
.service-bg-c .service-bg-content .service-content-item{
    /* 同行展示 */
    float: left;
    width: 248px;
    height: 100%;
    border: 1px solid #4d4a53;
    border-right: 0 ;
    text-align: center;
}
.service-bg-c .service-bg-content .service-content-item.bor0{
    border-right: 1px solid #4d4a53;
}
.service-content-item .content-item-cname{
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    margin-top: 51px;
}
.service-content-item .content-item-line{
    width: 30px;
    height: 1px;
    background-color: #ffffff;
    margin: 0 auto;
    margin-top: 13px;
}
.service-content-item .content-item-ename{
    font-size: 12px;
    height: 10px;
    line-height: 10px;
    margin-top: 13px;
}
/* hover时的状态 */
.service-content-item:hover{
    background-color: #668aca;
    transform: scale(1.06);
    transition: .8s;
    -webkit-transition: .8s;
    -moz-transition: .8s;
    -ms-transition: .8s;
    -o-transition: .8s;
}


/* 新闻部分样式 */
.news{
    width: 100%;
    /*  */
}
.news-c{
    overflow: hidden;
    width: 1200px;
    margin: 0 auto;
    /* background-color: #668aca; */
}
.news-c .news-bg-c{
    /* 超出部分隐藏 */
    overflow: hidden;
    width: 100%;
}
.news-c .news-bg-c .news-bg-left{
    overflow: hidden;
    float: left;
    width: 570px;
    height: 570px;
    margin-top: 60px;   
    margin-bottom: 30px;
    margin-right: 30px;
}
.news-c .news-bg-left .left-item{
    overflow: hidden;
    position: relative;
    float: left;
    height: 270px;
    margin-bottom: 30px;
}
.news-c .news-bg-right{
    overflow: hidden;
    position: relative;
    float: right;
    width: 570px;
    height: 570px;
    margin-top: 60px;
    margin-bottom: 30px;
    margin-left: 30px;
    background: url(../img/news-bg4.jpg) no-repeat center;
}

/* 新闻遮罩层样式 */
.news-bg-left  .mask-left{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 90px;
    background-color: rgba(0,0,0,.5);
    opacity: 0;
    transform: translateY(100%);
    transition: .4s;
}
.news-c .news-bg-right  .mask-right{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90px;
    background-color: rgba(0,0,0,.5);
    opacity: 0;
    tranform:translateY(100%);
    transition: .4s;
}
/* 遮罩层箭头 */
.news-bg-c .news-mask .arr{
    position: absolute;
    right: 50px;
    bottom: 12px;
    width: 30px;
    height: 30px;
    background: url('../img/mask-arr.png') no-repeat center;
    background-size: contain;
}
/* hover状态 */
.news-c .news-bg-left .left-item:hover .news-mask{
    opacity: 1;
    transform: translateY(0);
}
.news-c .news-bg-right:hover .news-mask{
    opacity: 1;
    transform: translateY(0);
}


/* 关于部分样式 */
.about{
    width: 100%;
}
.about-c{
    width: 1200px;
    margin: 0 auto;
}
.about-c .about-important{
    overflow: hidden;
    width: 100%;
    height: 386px;
    /* background-color: hotpink; */
}
/* 关于 左 */
.about-c .about-bg{
    float: left;
    width: 514px;
    height: 386px;
    /* background: url('../img/about-bg1.jpg') no-repeat center; */
    /* background-color: green; */
}
.about-c .about-bg img{
    margin: 7px 12px 79px 2px;
}
/* 关于 右 */
.about-c .about-text{
    float: right;
    width: 686px;
    height: 386px;
    /* background-color: red; */
}
.about-c .about-text .text{
    line-height: 24px;
    margin-top: 34px;
}